<template>
	<view class="message">
		<u-navbar bgColor="rgba(0,0,0,0)" :fixed="false">
			<view slot="left" class="align-center">
				<view style="margin-right: 200rpx; position: relative">
					<view style="font-weight: 600; font-size: 48rpx; color: #333333">消息</view>
					<view
						v-if="count > 0"
						class="flex-center1"
						style="
							font-weight: 600;
							font-size: 20rpx;
							color: #ffffff;
							width: 48rpx;
							height: 32rpx;
							background: #fe4343;
							border-radius: 16rpx;
							border: 2rpx solid #ffffff;
							position: absolute;
							right: -20rpx;
							top: -6rpx;
						"
					>
						{{ count }}
					</view>
				</view>
				<view @click="yidu">
					<image src="@/static/message/qc1.png" style="width: 32rpx; height: 30rpx; margin-right: 10rpx"></image>
					<text style="font-weight: 400; font-size: 28rpx; color: #333333">全部已读</text>
				</view>
			</view>
		</u-navbar>
		<view style="padding: 32rpx">
			<view class="flex-center1" style="margin-bottom: 40rpx">
				<view class="align-center" style="width: 686rpx; background: #f5f6fa; border-radius: 8rpx; padding: 18rpx 20rpx">
					<u-icon name="search" color="#999999" size="42"></u-icon>
					<input type="text" placeholder="搜索" style="font-weight: 400; font-size: 28rpx; color: #999999; margin-left: 10rpx" />
				</view>
			</view>
			<view class="flex-between1" style="margin-bottom: 50rpx">
				<view
					@click="
						type = 0;
						list1 = [];
						init();
					"
				>
					<image src="@/static/message/ms1.png" style="width: 104rpx; height: 104rpx; margin-bottom: 18rpx"></image>
					<view class="flex-center1" style="font-weight: 400; font-size: 28rpx; color: #333333">岗位</view>
				</view>
				<view
					@click="
						type = 1;
						list1 = [];
						init();
					"
				>
					<image src="@/static/message/ms2.png" style="width: 104rpx; height: 104rpx; margin-bottom: 18rpx"></image>
					<view class="flex-center1" style="font-weight: 400; font-size: 28rpx; color: #333333">住宿</view>
				</view>
				<view
					@click="
						type = 2;
						list1 = [];
						init();
					"
				>
					<image src="@/static/message/ms3.png" style="width: 104rpx; height: 104rpx; margin-bottom: 18rpx"></image>
					<view class="flex-center1" style="font-weight: 400; font-size: 28rpx; color: #333333">培训</view>
				</view>
				<view
					@click="
						type = 4;
						list1 = [];
						init();
					"
				>
					<image src="@/static/message/ms4.png" style="width: 104rpx; height: 104rpx; margin-bottom: 18rpx"></image>
					<view class="flex-center1" style="font-weight: 400; font-size: 28rpx; color: #333333">通知</view>
				</view>
			</view>
			<view class="">

				<u-swipe-action v-if="list1.length">
					<u-swipe-action-item
						@click="changemsg"
						:options="options1"
						@longpress="show = true"
						:name="item.id"
						class="flex"
						v-for="(item, index) in list1"
						:key="index"
						style="margin-bottom: 60rpx"
					>
						<view class="flex" style="padding: 20rpx 0" @click="messageToggle(item.content)" >
							<view style="margin-right: 20rpx; position: relative">
								<image :src="item.head" style="width: 96rpx; height: 96rpx; border-radius: 50%"></image>
								<view
									v-if="item.status == 0"
									style="border-radius: 50%; width: 24rpx; height: 24rpx; background: #fa4141; border: 2rpx solid #ffffff; position: absolute; top: 0; right: 0"
								></view>
							</view>
							<view style="flex: 1">
								<view class="flex-between1" style="margin-bottom: 6rpx">
									<text style="font-weight: 500; font-size: 32rpx; color: #333333">{{ item.title }}</text>
									<text style="font-weight: 400; font-size: 24rpx; color: #aaaaaa">{{ item.createTime }}</text>
								</view>
								<view class="single-line" style="font-weight: 400; font-size: 28rpx; color: #8f8e93">{{ item.content }}</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>

        <view v-if="messageShow" class="notification center" style=" background-color: rgb(0,0,0,0.6);" @click="messageShow=false" >
          <view class="popupCard" @click.stop="messageShow=true">
            <view class="center">
              <text class="popupCardTitle">详情</text>
            </view>
            <view class="popupCardContent">
              <scroll-view class="scroll-view-box" scroll-y="true">
                <view class="center">
                  <view style="margin-left: 42rpx">
                    <text style="font-size: 36rpx; color: #333333">{{messageText}}</text>
                  </view>
                </view>
              </scroll-view>
            </view>
            <button class="popupCardButton" type="primary" @click.stop="messageShow=false">确定</button>
          </view>
        </view>
				<view v-if="!list1.length">
					<view class="flex-center1" style="margin-bottom: 34rpx">
						<image src="@/static/message/msg.png" style="width: 400rpx; height: 298rpx"></image>
					</view>
					<view style="text-align: center">暂无消息</view>
				</view>
				<u-action-sheet :actions="list" cancelText="取消" :show="show" :closeOnClickOverlay="false" @close="close" @select="selectClick"></u-action-sheet>
			</view>
		</view>
		<Tabbar :value="2" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '删除',
					color: '#ffaa7f'
				}
			],
			options1: [
				{
					text: '已读',
					style: {
						backgroundColor: '#3c9cff'
					}
				},
				{
					text: '删除'
				}
			],
			list1: [],
			show: false,
			pageNum: 1,
			pageSize: 20,
			type: 0,
			isLastPage: false,
			count: 0,
      messageText:'',
      messageShow:false
		};
	},
	onShow() {
		this.list1 = [];
		this.init();
	},
	onReachBottom() {
		if (this.isLastPage) return;
		this.pageNum++;
		this.init();
	},
	methods: {
		init() {
			this.$request('front/user/getMessage', {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				type: this.type
			}).then((res) => {
				console.log(res, '消息列表');
				this.list1 = [...this.list1, ...res.obj.list];
				this.isLastPage = res.obj.isLastPage;
			});
			this.$request('front/user/messageStatus').then((res) => {
				console.log(res, 'sss');
				this.count = res.obj.count1 + res.obj.count2 + res.obj.count3 + res.obj.count4;
			});
		},
		close() {
			this.show = false;
		},
		changemsg(e) {
      console.log("有没有")
			if (e.index == 0) {
				this.ydmsg(e.name);
			}
			if (e.index == 1) {
				this.deletemsg(e.name);
			}
		},
    messageToggle(msg) {
      this.messageText = msg
      this.messageShow = true;
      this.yidu();
    },
		ydmsg(id) {
			this.$request('front/user/readMessage ', {
				id
			}).then((res) => {
				console.log(res, '已读');
				this.$tools.toast('操作成功');
				setTimeout(() => {
					this.list1 = [];
					this.init();
				}, 1000);
			});
		},
		deletemsg(id) {
			this.$request('front/user/deleteMessage', {
				id
			}).then((res) => {
				console.log(res, '删除');
				this.$tools.toast('操作成功');
				setTimeout(() => {
					this.list1 = [];
					this.init();
				}, 1000);
			});
		},
		yidu() {
			this.$request('front/user/allRead').then(() => {});
		}
	}
};
</script>

<style lang="less" scoped>
.message {
	.single-line {
		white-space: nowrap; /* 保证文本不会换行 */
		overflow: hidden; /* 超出容器部分隐藏 */
		text-overflow: ellipsis; /* 超出文本显示为省略号 */
	}
}
// 处理抽屉内容滚动
.scroll-view-box {
  flex: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.center{
  display: flex;
  justify-content: center;
  align-items: center
}
.notification{
  width: 750rpx;
  height: 100vh;
  position: fixed;
  top:0;
  left: 0;
  z-index: 99;
}
.popupCard{
  background-color: #FFFFFF;
  width: 80%;
  height: 720rpx;
  border-radius: 16rpx;
}
.popupCardTitle{
  font-weight: bold;
  font-size: 40rpx;
  margin-top: 28rpx;
  margin-bottom: 20rpx;
  color: #333333;
}
.popupCardContent{
  width: 90%;
  height: 470rpx;
  position: relative;
  margin-left: 14rpx;
}
.popupCardButton{
  width: 90%;
  margin-top: 34rpx;
  background-color: #1365f9
}
</style>
